<?php
/**
 *
 * @author 李大牛家的牛 (scafel@163.com)
 * @className config_value.blade.php
 * @createDate 2025/8/1 - 21:23
 * @description
 **/
?>

@include('manage.default.template.header')
<div class="layui-fluid" style="padding-top: 10px;">
    <div class="layui-tabs layui-tabs-card layui-panel layui-inline" style="width: 100%;" id="config_value_tabs">
        <ul class="layui-tabs-header layui-bg-tint">
            @foreach($cacheData as $key => $value)
                <li lay-code="{{ $key }}">{{$value["title"]}}</li>
            @endforeach
        </ul>
    </div>

    <table class="layui-hide" id="config_value_table" lay-filter="config_value_table"></table>
    <script type="text/html" id="config_value_table_toolbar">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="add">新增字段</button>
        </div>
    </script>
    <script type="text/html" id="config_value_table_row_action">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    </script>

    <div id="config_value_add_form" style="display: none;">
        <div class="layui-fluid" style="padding-top: 10px;">
            <div class="layui-card">
                <form class="layui-form layui-form-pane" action="javascript:void(0);" method="post" lay-filter="config_value_add_form">
                    <div class="layui-form-item">
                        <label class="layui-form-label">唯一编码</label>
                        <div class="layui-input-block">
                            <input type="text" name="code" value="" lay-verify="required" placeholder="唯一编码" lay-reqtext="请填写唯一编码" autocomplete="off" class="layui-input" lay-affix="clear">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">字段名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="ltsc001" value="" lay-verify="required" placeholder="字段名称" lay-reqtext="请填写字段名称" autocomplete="off" class="layui-input" lay-affix="eye">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">字 段 值</label>
                        <div class="layui-input-block">
                            <input type="text" name="ltsc002" value="" lay-verify="required" placeholder="字 段 值" lay-reqtext="请填写字段值" autocomplete="off" class="layui-input" lay-affix="clear">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="config_value_add_form_submit">提交</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div id="config_value_edit_form" style="display: none;">
        <div class="layui-fluid" style="padding-top: 10px;">
            <div class="layui-card">
                <form class="layui-form layui-form-pane" action="javascript:void(0);" method="post" lay-filter="config_value_edit_form">
                    <input type="hidden" name="code" value="">
                    <input type="hidden" name="id" value="">
                    <input type="hidden" name="ltsc003" value="">
                    <input type="hidden" name="ltsc004" value="">
                    <div class="layui-form-item">
                        <label class="layui-form-label">字段名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="ltsc001" value="" lay-verify="required" placeholder="字段名称" lay-reqtext="请填写字段名称" autocomplete="off" class="layui-input" lay-affix="eye">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">字 段 值</label>
                        <div class="layui-input-block">
                            <input type="text" name="ltsc002" value="" lay-verify="required" placeholder="字 段 值" lay-reqtext="请填写字段值" autocomplete="off" class="layui-input" lay-affix="clear">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="config_value_edit_form_submit">提交</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

</div>
@include('manage.default.template.footer')
<script>
    layui.use(["form", "interactive", "layer", "tabs", "table"], function () {
        var form = layui.form,
            req = layui.interactive,
            $ = layui.$,
            layer = layui.layer,
            table = layui.table,
            tabs = layui.tabs;

        var beforeTabsCode = "",
            currentTabsTitle = ""
            addFormLayerIndex = 0;
            editFormLayerIndex = 0;

        function getTabsHeaderCode() {
            var currentTabs = $(".layui-this");
            currentTabsTitle = currentTabs.text();
            return currentTabs.attr("lay-code");
        }

        table.render({
            elem:"#config_value_table",
            url:`/manage/system/config/data?code=${getTabsHeaderCode()}`,
            toolbar:"#config_value_table_toolbar",
            height: 'full-90',
            cols: [[
                {field: "code", width: 200, title: "编码",},
                {field: "ltsc001", title: "名称",},
                {field: "ltsc002", title: "值",},
                {field: "lta005", title: "状态", templet: function (field) {
                        if (field.status === 1){
                            return '<span style="color: blue;" lay-event="status">已启用</span>';
                        }  else{
                            return '<span style="color: red;" lay-event="status">已禁用</span>';
                        }
                    }},
                {title: "操作", width: 250, align: "center", fixed: "right", toolbar: "#config_value_table_row_action"}
            ]],
            text: {none: '加载数据为空'},
            parseData: function(res){ // res 即为原始返回的数据
                return {
                    "code": res.code === 1 ? 0 : 1, // 解析接口状态
                    "msg": res.msg, // 解析提示文本
                    "data": res.data // 解析数据列表
                };
            },
        });

        table.on("toolbar(config_value_table)",function (t) {
            if (t.event === "add"){
                addFormLayerIndex = layer.open({
                    type: 1,
                    title: "新增字段",
                    content: $("#config_value_add_form"),
                    offset: '20%',
                })
            }
        });
        table.on("tool(config_value_table)",function (t) {
            const i = t.data;
            if (t.event === "edit"){
                editFormLayerIndex = layer.open({
                    type: 1,
                    title: "编辑字段",
                    content: $("#config_value_edit_form"),
                    offset: '20%',
                    success: function (e) {
                        form.val("config_value_edit_form", i);
                    }
                })
            }
            else if (t.event === "status"){
                var msg = "确定修改状态为";
                if(i.status === 0) {
                    msg += "启用吗？";
                }else {
                    msg += "禁用吗？";
                }
                layer.confirm(msg, function(e) {
                    let url = `/manage/system/config/status?code=${i.code}`;
                    req.get(url, {} ,function (res) {
                        layer.msg(res.msg);
                        table.reload('config_value_table'); //重载表格
                        layer.close(e);
                    })
                });
            }
            else{
                layer.msg("功能开发中");
            }
        });

        tabs.on("beforeChange(config_value_tabs)", function (data) {
            beforeTabsCode = getTabsHeaderCode();
        });

        tabs.on("afterChange(config_value_tabs)", function (data) {
            if(beforeTabsCode === getTabsHeaderCode()) {
                return;
            }
            table.reloadData("config_value_table", {
                url: `/manage/system/config/data?code=${getTabsHeaderCode()}`
            });
        });

        // 提交事件
        form.on('submit(config_value_add_form_submit)', function (data) {
            const field = data.field; // 获取表单字段值
            field["ltsc004"] = currentTabsTitle;
            field["ltsc003"] = getTabsHeaderCode;
            req.post("/manage/system/config/add", field, function (res) {
                layer.close(addFormLayerIndex);
                table.reloadData("config_value_table", {
                    url: `/manage/system/config/data?code=${getTabsHeaderCode()}`
                });
            })
            return false; // 阻止默认 form 跳转
        });

        // 提交事件
        form.on('submit(config_value_edit_form_submit)', function (data) {
            const field = data.field; // 获取表单字段值
            req.post("/manage/system/config/edit", field, function (res) {
                layer.close(editFormLayerIndex);
                table.reloadData("config_value_table", {
                    url: `/manage/system/config/data?code=${getTabsHeaderCode()}`
                });
            })
            return false; // 阻止默认 form 跳转
        });

    });
</script>
